<template>
	<view>
		<image class="back_image" src="../../static/users/background.png" mode="aspectFill"></image>

		<view class="name_shop">
			<view class="head">
				<image class="avtral" src="../../static/users/shop.png" mode="aspectFill"></image>
				<image src="../../static/users/vip.png" class="vip_imgage" mode="aspectFill"></image>
				<view class="shop_title">
					鬼灭之刃动漫店
				</view>

				<view class="home_shop">
					7号宿舍楼505
				</view>

				<view class="time_start">
					营业：08:00-22:00
					<text>销量:2366</text>
				</view>

				<view class="youhui">
					<!-- 	<view class="youhui_one">
						10减5
					</view> -->

					<view v-for="(item,index) in 6">
						<view class="fenge_xian" v-if="index!=0"></view>
						<view class="youhui_two">
							45减10
						</view>
					</view>


				</view>

				<view class="content">
					只卖关于动漫一切周边，欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos道具服装等...欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos等...
				</view>

				<view class="qq">
					<image src="../../static/users/qq.png" class="image_biao" mode=""></image>
					<text>1068225963</text>
				</view>

				<view class="weixin">
					<image src="../../static/users/weixin.png" class="image_biao" mode=""></image>
					<text>AROU-123</text>
				</view>

				<view class="phone">
					<image src="../../static/users/phone.png" class="image_biao" mode=""></image>
					<text>15282033299</text>
				</view>


			</view>




			<u-tabs :list="list" :current="current" bg-color="#fff" active-color="#181818" inactive-color="#181818"
				@change="change"></u-tabs>

			<view class="shai_xuan">
				<view class="text1">
					宿舍楼
					<image class="image_lou" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
				</view>

				<view class="xian">

				</view>

				<view class="text2">
					销量
					<image class="image_xiao" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
				</view>

			</view>

			<view class="detailback" v-for="(item,index) in menu">
				<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
				<view class="title">
					灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
				</view>

				<view class="have">
					已售100
				</view>

				<view class="price">
					<text>¥</text>
					366
				</view>

				<view class="guige" v-if="index%2==0">
					选规格
				</view>

				<view class="bujin" v-if="index%2!=0">
					<image class="image_bu_jian" @click="reduce(index)" src="../../static/users/jian.png"
						mode="aspectFill"></image>
					<view class="num">
						{{item.num}}
					</view>
					<image class="image_bu_jia" @click="add(index)" src="../../static/users/jia.png" mode="aspectFill">
					</image>
				</view>
			</view>

			<view class="bottom">

			</view>
		</view>

		<view class="gosuan">
			<image @click="show = true" src="../../static/users/shopping.png" class="image_shopping" mode=""></image>
			<view class="num_shop">
				{{menu.length}}
			</view>
			<view class="price_shopping">
				<text>¥</text>
				336
			</view>

			<view class="jie">
				共2件
				<text>需xx元起送</text>
			</view>

			<view class="go_suan">
				去结算
			</view>

			<view class="xia_"></view>

		</view>

		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="bottom_la">
				<view class="top_la"></view>
				<view class="head_la">
					<view class="title_la">
						已选商品
					</view>

					<view class="clear_la">
						<image class="clear_image" src="../../static/users/clear.png" mode=""></image>
						<text>清空</text>
					</view>
				</view>


				<view class="detailback" v-for="(item,index) in menu">
					<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
					<view class="title">
						灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
					</view>

					<view class="have">
						已售100
					</view>

					<view class="price">
						<text>¥</text>
						366
					</view>


					<view class="bujin">
						<image class="image_bu_jian" @click="reduce(index)" src="../../static/users/jian.png"
							mode="aspectFill"></image>
						<view class="num">
							{{item.num}}
						</view>
						<image class="image_bu_jia" @click="add(index)" src="../../static/users/jia.png"
							mode="aspectFill">
						</image>
					</view>
				</view>

                <view class="gosuan">
                	<image @click="show = true" src="../../static/users/shopping.png" class="image_shopping" mode=""></image>
					<view class="num_shop">
						{{menu.length}}
					</view>
                	<view class="price_shopping">
                		<text>¥</text>
                		336
                	</view>
                
                	<view class="jie">
                		共2件
                		<text>需xx元起送</text>
                	</view>
                
                	<view class="go_suan">
                		去结算
                	</view>
                
                	<view class="xia_"></view>
                
                </view>
				
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推荐'
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}],
				current: 0,
				menu: [{
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}],
				show: false
			}
		},
		methods: {
			change(index) {
				console.log(index);
				this.current = index;
			},
			reduce(index) {
				if (this.menu[index].num > 1) {
					this.menu[index].num--
				}

			},
			add(index) {
				this.menu[index].num++
			}
		},
		onLoad(e) {
			console.log(e.id);
		}
	}
</script>

<style lang="scss">
	.bottom_la {
		height: 900rpx;
		background: #FFFFFF;
		position: relative;

		.top_la {
			width: 750rpx;
			height: 105rpx;
			background-color: #fff;
		}

		.head_la {
			position: fixed;
			top: 0;
			width: 750rpx;
			height: 105rpx;
			background: #fff;
			z-index: 5;

			.title_la {
				margin: 42rpx 0 0 42rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #181818;
			}

			.clear_la {
				position: absolute;
				right: 87rpx;
				top: 42rpx;

				.clear_image {
					width: 22rpx;
					height: 24rpx;
				}

				text {
					width: 60rpx;
					position: absolute;
					top: 2rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #999999;
				}
			}
		}



	}

	.head {
		width: 750rpx;
		height: 365rpx;
		position: relative;

		.avtral {
			margin: 30rpx 0 0 30rpx;
			width: 180rpx;
			height: 150rpx;
		}

		.vip_imgage {
			position: absolute;
			top: 28rpx;
			left: 151rpx;
			width: 60rpx;
			height: 30rpx;
			z-index: 100;
		}

		.shop_title {
			position: absolute;
			top: 16rpx;
			left: 228rpx;
			width: 350rpx;
			height: 34rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
			line-height: 80rpx;
		}

		.home_shop {
			position: absolute;
			top: 18rpx;
			left: 594rpx;

			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			line-height: 80rpx;
		}

		.time_start {
			position: absolute;
			top: 98rpx;
			left: 229rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;

			text {
				margin-left: 20rpx;
			}
		}

		.youhui {
			position: absolute;
			left: 229rpx;
			top: 136rpx;
			height: 28rpx;
			border: 1px solid #FF5252;
			border-radius: 14rpx;
			// width: 480rpx;
			display: flex;

			.youhui_one {
				margin: 0rpx 0 0 16rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 25rpx;
			}

			.youhui_two {
				margin: 0rpx 6px;
				float: left;
				right: 16rpx;
				font-size: 18rpx;
				// -webkit-transform: scale(0.5);
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 28rpx;
			}

			.fenge_xian {
				margin: 5rpx 0px;
				float: left;
				width: 1px;
				height: 18rpx;
				background: #FF5252;
			}
		}

		.content {
			margin: 29rpx 0 0 30rpx;
			width: 678rpx;
			height: 56rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.qq {
			position: absolute;
			top: 292rpx;
			left: 30rpx;
			width: 200rpx;
			height: 40rpx;

			text {
				position: absolute;
				top: 0rpx;
				left: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
				line-height: 40rpx;
			}
		}

		.weixin {
			position: absolute;
			top: 292rpx;
			left: 283rpx;
			width: 200rpx;
			height: 40rpx;

			text {
				position: absolute;
				top: 0rpx;
				left: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
				line-height: 40rpx;
			}
		}

		.phone {
			position: absolute;
			left: 516rpx;
			top: 292rpx;
			width: 200rpx;
			height: 40rpx;

			text {
				position: absolute;
				top: 0rpx;
				left: 52rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
				line-height: 40rpx;
			}
		}

	}

	.image_biao {
		width: 40rpx;
		height: 40rpx;
	}

	.name_shop {
		position: absolute;
		top: 259rpx;
		width: 750rpx;
		background: #FAFBFC;
		border-radius: 40rpx 40rpx 0 0;
	}

	.back_image {
		width: 750rpx;
		height: 310rpx;
	}

	.shai_xuan {
		margin: 20rpx 0 20rpx 30rpx;
		width: 690rpx;
		height: 68rpx;
		background: #F6F7F9;
		border-radius: 34rpx;
		position: relative;
	}

	.text1 {
		margin-left: 53rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.text2 {
		position: absolute;
		left: 224rpx;
		top: -68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.image_lou {
		position: absolute;
		top: 32rpx;
		left: 82rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.image_xiao {
		position: absolute;
		top: 32rpx;
		left: 62rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.xian {
		position: absolute;
		top: 19rpx;
		left: 184rpx;
		width: 1rpx;
		height: 30rpx;
		background: #FFFFFF;
	}

	.detailback {
		height: 190rpx;
		width: 750rpx;
		position: relative;
	}

	.img_detail {
		margin: 20rpx 0 0 30rpx;
		width: 180rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.title {
		position: absolute;
		top: 17rpx;
		left: 232rpx;
		width: 477rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.have {
		position: absolute;
		left: 232rpx;
		top: 63rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.price {
		position: absolute;
		top: 102rpx;
		left: 232rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4646;

		text {
			font-size: 20rpx;
		}
	}

	.guige {
		position: absolute;
		right: 30rpx;
		top: 107rpx;
		width: 89rpx;
		height: 36rpx;
		background: #F48F5B;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;

		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bujin {
		position: absolute;
		left: 600rpx;
		top: 107rpx;
		width: 200rpx;
		height: 36rpx;

	}

	.image_bu_jian {
		width: 36rpx;
		height: 36rpx;
	}

	.image_bu_jia {
		margin-left: 48rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.num {
		position: absolute;
		left: 36rpx;
		top: 0;
		width: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}

	.bottom {
		width: 750rpx;
		height: 400rpx;
	}

	.gosuan {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
		border-radius: 40rpx 40rpx 0px 0px;
        .num_shop{
			position: absolute;
			left: 90rpx;
			top: 19rpx;
			width: 28rpx;
			height: 28rpx;
			background: #FF4646;
			border-radius: 50%;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 28rpx;
		}
		// position: relative;
		.image_shopping {
			margin: 23rpx 0 0 40rpx;
			width: 58rpx;
			height: 56rpx;
		}

		.price_shopping {
			position: absolute;
			top: 12rpx;
			left: 149rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF4646;

			text {

				font-size: 24rpx;
			}
		}

		.jie {
			position: absolute;
			top: 58rpx;
			left: 146rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #999999;

			text {
				margin-left: 30rpx;
			}
		}

		.go_suan {
			position: absolute;
			right: 30rpx;
			top: 15rpx;
			width: 190rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.xia_ {
			position: absolute;
			left: 241rpx;
			bottom: 18rpx;
			width: 268rpx;
			height: 10rpx;
			background-color: black;
		}
	}
</style>
